import React, { Component } from 'react'

import Small from './Small'


export default class Big extends Component {
    // 第一个声明周期函数
    constructor(){
        super();
        this.state = {
            msg: '天冷加衣!',
            isShow:true
        }
        console.log('1-初始化');
        // 在构造函数中调用函数
        this.changeMsg()
        // console.log(this.state);
    }
    // 第二个声明周期函数- 作用是根据props修改state
    static getDerivedStateFromProps(props,state){
        console.log('2 第二个声明周期函数');
        console.log(props,state);
        // 如果返回null, 就不修改state; 如果返回对象, 就修改state
        return null
    }
    changeMsg(){
        // console.log(333);
        this.setState({
            msg: '多喝热水'
        },()=>{
            // console.log('哈哈',this.state);
        })
    }
    componentDidMount(){
        // 在这个函数中发请求获取数据, 修改state
        console.log('4-组件已经安装成功');
    }
    toggle(){
        this.setState({
            isShow: !this.state.isShow
        })
    }
    render() {
        console.log('3-渲染');
        return (
            <div>
                <p>我是父组件</p>
                <button onClick={() => this.changeMsg()}>修改msg</button>
                <button onClick={()=> this.toggle()}>切换子组件</button>
                { this.state.isShow ? <Small msg={this.state.msg}></Small>:null}
            </div>
        )
    }
}
